<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>@supports</title>
    <style type="text/css">
      /* supports A and B and ... */
      /* supports A and B not(B) and ... */
      @supports (animation: none) {
        .demo {
          background-color: aqua;
          height: 50px;
          width: 50px;
          animation: demoAnimation 1s infinite;
        }
        @keyframes demoAnimation {
          0% {
            transform: rotateZ(0);
          }
          100% {
            transform: rotateZ(360deg);
          }
        }
      }
    </style>
  </head>
  <body>
    <a href="./1-通用关键字.html">上一篇</a>
    <a href="./3-新的尺寸单位.html">下一篇</a>
    <br />
    <div class="demo"></div>
    <br>
  <br>
  <pre>@supports (animation: none) {
    .demo {
      background-color: aqua;
      height: 50px;
      width: 50px;
      animation: demoAnimation 1s infinite;
    }
    @keyframes demoAnimation {
      0% {
        transform: rotateZ(0);
      }
      100% {
        transform: rotateZ(360deg);
      }
    }
  }</pre>
  </body>
</html>
